<template>
  <div>
    <a href="#" class="btn btn-primary" @click="$router.push('/addhero')"
      >添加英雄</a
    >
    <hr />
    <table class="table table-hover">
      <thead>
        <tr>
          <th>ID</th>
          <th>英雄名称</th>
          <th>英雄性别</th>
          <th>创建时间</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in heroList" :key="item.id">
          <td>{{ item.id }}</td>
          <td>{{ item.heroName }}</td>
          <td>{{ item.gender }}</td>
          <td>{{ item.cTime }}</td>
          <td>
            <button class="btn btn-success" @click="$router.push(`/edithero/${item.id}`)">编辑</button>
            &nbsp;
            <button class="btn btn-danger" @click="hDel(item.id)">删除</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      heroList: [],
    };
  },
  created() {
    this.loadHeroes();
  },
  methods: {
    loadHeroes() {
      this.$http("heroes").then((res) => {
        this.heroList = res;
      });
    },
    hDel(id) {
      if (confirm("确定要删除么？")) {
        this.$http(`heroes/${id}`, "delete").then((res) => {
          this.loadHeroes();
        });
      }
    },
  },
};
</script>